<template>
	<view>
		<!-- 自定义导航栏 -->
		<u-navbar style="font-weight: bold;" leftText="返回" title="我的优惠券" :safeAreaInsetTop="false" bgColor="#3183FC" leftIconColor="#FFFFFF"
			:titleStyle="{ color: '#FFFFFF' }">
			<view class="u-nav-slot" slot="left">
				<div >
					<div @click="tzwdsy">
						<image style="width: 40rpx;" src="../../../static/wdimg/ztb-fh.png" mode="widthFix"></image>
					</div>
				</div>
			</view>
		</u-navbar>
		
		<div class="top">
			<div class="xxxg">	
				<div class="wdyhq-dh">
					<div style="border-bottom: 2px solid white;"
						class="wdyhq-dh1" @click="tzdsyq">待使用</div>
					<div class="wdyhq-dh2" @click="tzysyq">已使用</div>
					<div class="wdyhq-dh3" @click="tzygqq">已过期</div>
				</div>
				<uni-card class="xxxg-card" title="">
					<div class="wdyhq-yhqmk">

						<div class="wdyhq-yhqnr">
							<div class="w-y-top">
								<div class="w-y-top-left">
									<div class="w-y-t-l-t">仅限于XX加油站使用</div>
									<div class="w-y-t-l-u">满200元可用</div>
								</div>
								<div class="w-y-top-right">
									<div class="w-y-t-r-l">￥</div>
									<div class="w-y-t-r-r">20</div>
								</div>
							</div>
							<div class="w-y-und">
								<div class="w-y-und-t">有效期至： 2020.044.11——2023.05.11</div>
								<div class="w-y-und-u">去使用 ></div>
							</div>
						</div>

						<div class="wdyhq-yhqnr">
							<div class="w-y-top">
								<div class="w-y-top-left">
									<div class="w-y-t-l-t">仅限于XX加油站使用</div>
									<div class="w-y-t-l-u">满200元可用</div>
								</div>
								<div class="w-y-top-right">
									<div class="w-y-t-r-l">￥</div>
									<div class="w-y-t-r-r">20</div>
								</div>
							</div>
							<div class="w-y-und">
								<div class="w-y-und-t">有效期至： 2020.044.11——2023.05.11</div>
								<div class="w-y-und-u">去使用 ></div>
							</div>
						</div>



					</div>
				</uni-card>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {		
			return {
			}
		},
		methods: {
			tzdsyq() {
				uni.navigateTo({
					url: "/pages/my/wdyhq/wdyhq"
				})
			},
			tzysyq() {
				uni.navigateTo({
					url: "/pages/my/wdyhq/yhqdlq/yhqdlq"
				})
			},
			tzygqq() {
				uni.navigateTo({
					url: "/pages/my/wdyhq/yhqygq/yhqygq"
				})
			},
			tzwdsy(){
				uni.switchTab({
					url: "/pages/my/my"
				})
			},
		}
	}
</script>

<style>
	.top {
		margin-top: 88rpx;
		width: 750rpx;
		height: 400rpx;
		background-color: #3183FC;
		/* 	overflow: hidden; */
		/* 	background-image: url(@/static/wdimg/aaa.jpg); */
		position: relative;
	}

	.xxxg {
		position: absolute;
		width: 750rpx;

	}

	.xxxg-card {
		/* 		height: 500rpx; */
		/* 	width: 750rpx; */
		border-radius: 25rpx;
	}

	.wdyhq-dh {
		width: 100%;
		color: white;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
		margin-bottom: 30rpx;
	}

	.wdyhq-yhqmk {
		margin-top: 20rpx;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.wdyhq-yhqnr {
		margin-top: 20rpx;
		background-image: url(/static/wdimg/q2.png);
		width: 100%;
		height: 210rpx;
		background-size: 100%;
		color: white;
	}


	.w-y-top {
		display: flex;
		justify-content: space-between;
		/* background-color: red; */
		height: 70%;

	}

	.w-y-top-left {
		width: 50%;
		/* 		background-color: red; */
	}

	.w-y-top-right {
		width: 50%;
		/* 	background-color: blue; */
		display: flex;
		justify-content: center;
	}

	.w-y-t-l-t {
		font-size: 20rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.w-y-t-l-u {
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.w-y-t-r-l {
		margin-left: 100rpx;
		margin-top: 70rpx;
		font-size: 25rpx;

	}

	.w-y-t-r-r {
		margin-top: 50rpx;
		font-size: 80rpx;
		font-weight: bold;
	}

	.w-y-und {
		display: flex;
		justify-content: space-between;
		height: 30%;
		width: 100%;
		border-top: 1px dashed white;
		align-items: center;
	}

	.w-y-und-t {
		font-size: 20rpx;
		margin-left: 20rpx;
	}

	.w-y-und-u {
		font-size: 25rpx;
		margin-right: 20rpx;
	}
</style>